<template>
	<view class="posterBoxSty" v-if="loading == true">
		<view class="titleSty">
			<div :style="`height: ${statusBarHeight}px;`"></div>
			<Title :title="title" />
		</view>
		
		<image :src="imgSrc" mode="widthFix" class="posterSty"></image>
		<view class="saveBtn" @click="saveImage">
			{{$t('将海报保存至手机')}}
		</view>
	</view>
</template>

<script>
	import Title from './../components/title.vue'
	import {  getInvitationImg } from '@/api/basic'
	
	export default {
		components: {
			Title
		},
		data() {
			return {
				title: this.$t('邀请海报'),
				loading:false,
				imgSrc: '',
				statusBarHeight: uni.getStorageSync('statusBarHeight')
			}
		},
		mounted() {
			this.getInvitationImg()
		},
		methods: {
			getInvitationImg() {
				uni.showLoading({
					title: this.$t('生成中')
				}, 10000);
				getInvitationImg().then(res => {
					this.imgSrc = res.data.data
					this.loading = true
					uni.hideLoading()
				})
			},
		  saveImage() {
				this.isMessageGo({
					action: 'downloadFile',
					data:{
						url: this.imgSrc,
						type: 2,
					}
				})
		  }
		}
	}
</script>

<style lang="scss">
	@import '@/assets/appScss.scss';
	.posterBoxSty {
		width: 100%;
		// height: 100%;
		position: relative;
	}
.posterSty {
	width: 100vw;
	height: 100vh;
	position: relative;
	// margin-top: 150rpx;
	// height: var(--status-bar-height);
}
.saveBtn {
	width: 85%;
	height: 94rpx;
	background: linear-gradient(90deg, #278AFF 0%, #52EEFF 100%);
	box-shadow: -4px 5px 6.5px 0px #C8FBFF75 inset;
	box-shadow: -2px -6px 9.9px 0px #71D0FF inset;
	font-family: PingFang SC;
	font-weight: 500;
	font-size: 32rpx;
	line-height: 94rpx;
	letter-spacing: 3rpx;
	text-align: center;
	color: #FFFFFF;
	border-radius: 500rpx;
	margin: 0 auto;
	position: absolute;
	bottom: 100rpx;
	left: 60rpx;
}
.titleSty {
	position: sticky;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 10;
	background-color: #FFFFFF;
	padding-top: 18rpx;
	padding-bottom: 20rpx;
}
</style>
